<script setup>
import Button from './Button_lxw.vue';
import ValiadationButton from './ValiadationButton.vue';
import getRequest from '../utils/lxw_request';
import Input from './Input_lxw.vue';
import {ref} from 'vue'
const props = defineProps(['confirmFunction', 'confirmParams', 'cancelFunction', 'cancelParams']);

const new_email = ref('')
const code = ref('')

function confirm() {
    if (props.confirmFunction == undefined) {
        return;
    }
    props.confirmParams === undefined ? props.confirmFunction.call({new_email, code}) : props.confirmFunction.call(null, props.confirmParams);
}

function cancel() {
    if (props.cancelFunction === undefined) {
        return;
    }
    props.cancelParams === undefined ? props.cancelFunction.call() : props.cancelFunction.call(null, props.cancelParams);
}

function getVerificationCode({new_email}) {
    if(new_email === "") {
        return ;
    }
    const search_param = new URLSearchParams();
    search_param.set('mail', new_email);
    getRequest(`/user/account/email/verify?${search_param.toString()}`, "GET")
        .then((response) => response.json())
        .then((json) => {
            if (json.code === 200) {
                alert("发送验证码成功");
                this.startTimer();
            } else {
                alert(json.msg);
            }
        })
        .catch((err) => {
            console.error(err);
        })
}

</script>
<template>
    <div class="email-form" >
        <div class="title">更换邮箱</div>
            <div class="new-email" >
                <Input type="text" v-model="new_email" placeholder="请输入你的新邮箱" class="new-email-input" />
            </div>
            <div class="code" >
                <Input type="text" v-model="code" placeholder="请输入验证码" class="code-input" />
                <ValiadationButton class="valiadation" :get-function="getVerificationCode" :get-params="{new_email}" />
            </div>
        <div class="buttons">
            <Button class="confirm" :style="{ margin: '0 15px' }" @click="confirm">确定</Button>
            <Button class="cancel" :style="{ margin: '0 15px' }" @click="cancel">取消</Button>
        </div>
    </div>
</template>
<style scoped >
.title {
     font-size: 20px;
     margin: 15px auto;
     text-align: center;
     padding: 10px 0;
     border-bottom: 1px solid #C0C4CC;
}

.new-email-input {
    width: 520px;
}

.new-email,
.code {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
}

.code-input {
    width: 300px;
}


.buttons {
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 15px auto;
 }

.valiadation {
    width: 200px !important;
    border: none !important;
    background-color: #8493a6 !important;
    color: #FFFFFF !important;
}

 .confirm {
     width: 120px !important;
     border: none !important;
     background-color: #8493a6 !important;
     color: #FFFFFF !important;
 }

 .cancel {
     width: 120px !important;
     border: none !important;
     background-color: #939393 !important;
     color: #FFFFFF !important;
 }

</style>